<template>
  <div class="goods-warehouse">
    <!-- 标题 -->
    <h2>预发售商品管理</h2>

    <!-- 工具栏 -->
    <div class="toolbar">
      <div class="search-group">
        <el-input v-model="searchKeyword" placeholder="输入商品名称搜索" style="width: 240px;" />
        <el-select v-model="filterStatus" placeholder="选择状态" style="margin-left: 10px; width: 120px;">
          <el-option label="全部" value="" />
          <el-option label="待审核" value="pending" />
          <el-option label="已通过" value="approved" />
          <el-option label="已驳回" value="rejected" />
        </el-select>
      </div>
      <div class="action-buttons">
        <el-button type="primary" @click="batchList">批量上架</el-button>
        <el-button @click="refresh">刷新</el-button>
      </div>
    </div>

    <!-- 表格 -->
    <el-table
      :data="filteredProducts"
      border
      style="width: 100%; margin-top: 15px;"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="45" />

      <el-table-column prop="name" label="商品名称" />
      <el-table-column prop="price" label="价格" />
      <el-table-column prop="stock" label="库存" />
      <el-table-column prop="category" label="分类" />
      <el-table-column prop="releaseDate" label="预计发布日期" />

      <el-table-column prop="status" label="审核状态">
        <template #default="{ row }">
          <el-tag :type="statusTagType(row.status)">
            {{ statusTextMap[row.status] }}
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column label="商品图片" width="120">
        <template #default="{ row }">
          <img
            :src="row.image"
            alt="商品图"
            style="width: 60px; cursor: pointer; border-radius: 4px;"
            @click="previewImage(row.image)"
          />
        </template>
      </el-table-column>

      <!-- 操作列：优化版按钮 -->
      <el-table-column label="操作" width="240">
        <template #default="{ row }">
          <div class="table-row-actions">
            <!-- 通过审核 -->
            <el-tooltip content="通过审核" placement="top">
              <el-button
                circle
                type="success"
                size="small"
                icon="Check"
                @click="approveProduct(row)"
              />
            </el-tooltip>

            <!-- 驳回审核 -->
            <el-tooltip content="驳回审核" placement="top">
              <el-button
                circle
                type="danger"
                size="small"
                icon="Close"
                @click="rejectProduct(row)"
              />
            </el-tooltip>

            <!-- 立即上架 -->
            <el-tooltip content="立即上架" placement="top">
              <el-button
                circle
                type="primary"
                size="small"
                icon="ArrowUp"
                @click="listSingle(row)"
              />
            </el-tooltip>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination layout="prev, pager, next" :total="100" style="margin-top: 15px;" />

    <!-- 图片预览弹窗 -->
    <el-dialog v-model="showPreview" title="商品图片预览" width="40%">
      <img :src="previewUrl" alt="大图" style="width: 100%; border-radius: 8px;" />
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

const products = ref([
  {
    id: 1,
    name: 'iPhone 16 Pro',
    price: 9999,
    stock: 200,
    category: '电子产品',
    releaseDate: '2024-10-01',
    status: 'pending',
    image: 'https://via.placeholder.com/150'
  },
  {
    id: 2,
    name: 'Nike Air Max',
    price: 899,
    stock: 150,
    category: '服装',
    releaseDate: '2024-10-10',
    status: 'approved',
    image: 'https://via.placeholder.com/150'
  }
])

const searchKeyword = ref('')
const filterStatus = ref('')
const selectedProducts = ref([])
const showPreview = ref(false)
const previewUrl = ref('')

// 审核状态映射
const statusTextMap = {
  pending: '待审核',
  approved: '已通过',
  rejected: '已驳回'
}

// tag 类型映射
const statusTagType = (status) => {
  switch (status) {
    case 'pending':
      return 'warning'
    case 'approved':
      return 'success'
    case 'rejected':
      return 'danger'
    default:
      return ''
  }
}

// 过滤后的商品列表
const filteredProducts = computed(() => {
  return products.value.filter(p => {
    const keywordMatch = p.name.includes(searchKeyword.value)
    const statusMatch = filterStatus.value ? p.status === filterStatus.value : true
    return keywordMatch && statusMatch
  })
})

// 处理选中项变化
const handleSelectionChange = (val) => {
  selectedProducts.value = val
}

// 批量上架
const batchList = () => {
  if (!selectedProducts.value.length) {
    ElMessage.warning('请先选择商品')
    return
  }

  ElMessageBox.confirm(`确定要上架选中的 ${selectedProducts.value.length} 个商品？`, '提示').then(() => {
    selectedProducts.value.forEach(p => {
      p.status = 'listed'
    })
    ElMessage.success('批量上架成功')
  })
}

// 单个上架
const listSingle = (product) => {
  product.status = 'listed'
  ElMessage.success(`商品《${product.name}》已上架`)
}

// 通过审核
const approveProduct = (product) => {
  product.status = 'approved'
  ElMessage.success(`商品《${product.name}》审核通过`)
}

// 驳回审核
const rejectProduct = (product) => {
  product.status = 'rejected'
  ElMessage.warning(`商品《${product.name}》已驳回`)
}

// 刷新数据
const refresh = () => {
  ElMessage.info('数据已刷新')
}

// 预览图片
const previewImage = (url) => {
  previewUrl.value = url
  showPreview.value = true
}
</script>

<style scoped>
.goods-warehouse {
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
}

.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.search-group {
  display: flex;
  align-items: center;
}

.action-buttons .el-button {
  margin-left: 10px;
}

.el-table__row img {
  transition: transform 0.3s ease;
}

.el-table__row img:hover {
  transform: scale(1.1);
}

.table-row-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
</style>